import { useState, useImperativeHandle, forwardRef } from "react";
import {
  View,
  Alert,
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
} from "react-native";
import * as ImagePicker from "expo-image-picker";
import AntDesign from "@expo/vector-icons/AntDesign";

const { width } = Dimensions.get("window"); // 获取屏幕宽度

interface VideoPickerProps {
  onSelect: (isSelected: boolean) => void,
  resetProcessingQueue: () => void,
  isDisabled: boolean
}

interface VideoPickerHandleProps {
  getVideos: () => any,
  clear: () => void
}

const VideoPicker = forwardRef<VideoPickerHandleProps, VideoPickerProps>((props, ref) => {
  const { onSelect, resetProcessingQueue, isDisabled } = props;
  const [video, setVideo] = useState([]);



  const clearSelected = () => {
    setVideo([]);
    resetProcessingQueue()
  }

  const pickVideo = async () => {

    try {
      // 请求权限
      const { status } =
        await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (status !== "granted") {
        Alert.alert('权限被拒绝', "需要相册权限才能选择视频", [
          {
            text: '确认',
          },
        ]);
        return;
      }

      // 打开相册选择视频
      let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Videos, // 只选择视频
        // allowsEditing: true, // 允许编辑
        quality: 1, // 视频质量
        allowsMultipleSelection: true,
        selectionLimit: 10,
      });
      if (!result.canceled) {
        setVideo(result.assets);
        onSelect?.(false);
      } else {
        onSelect?.(true);
        setVideo([])
      }
    } catch (err) {
      console.error("Error picking videos:", err);
    }
  };

  useImperativeHandle(ref, () => {
    return {
      getVideos: () => {
        return video;
      },
      clear: clearSelected
    };
  });



  return (
    <View>
      <TouchableOpacity onPress={pickVideo} disabled={video?.length === 0 ? false : isDisabled}>
        <View style={[styles.container, { width: width - 40 }]}>
          <View>
            <AntDesign name="plus" size={70} style={styles.icon} />
            <Text style={styles.text}>选择本地视频</Text>
          </View>

        </View>
      </TouchableOpacity>
      <View style={styles.selectesTips} ><Text>已选择{video?.length}个视频</Text><TouchableOpacity onPress={clearSelected}><Text style={styles.clearBtn}>清空</Text></TouchableOpacity></View>
    </View>
  );
})


export default VideoPicker

const styles = StyleSheet.create({
  container: {
    height: 260,
    borderWidth: 1,
    borderColor: "#d9d9d9",
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    color: "#d9d9d9",
    fontSize: 16,
    fontWeight: "bold",
  },
  icon: {
    color: "#d9d9d9",
    textAlign: "center",
  },
  selectesTips: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 4
  },
  clearBtn: {
    borderWidth: 1,
    borderColor: "#5d5ce5",
    padding: 2,
    backgroundColor: "white",
    alignItems: 'center',
    borderRadius: 4,
  }
});
